<template>
	<view class="content">
		<view class="top">
			<view class="top_title">恭喜你～获得该拍品</view>
			<!-- <view class="top_tip">请在3分钟完成付款</view> -->
			<view class="top_date">
				<view class="top_date_txt">倒计时:</view>
				<view class="top_date_curr">
					<tui-countdown :time="times" borderColor="#fff" :size="32"></tui-countdown>
				</view>
			</view>
			<view class="paymoney">
				<view class="sign iconfont">&#xe604;</view>
				<view class="money">{{money}}</view>
			</view>
		</view>
		
		<view class="group">
			
			<view class="grouplist">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="index">
						<view class="uni_name" >
							<image class="uni_icon" :src="item.image" mode=""></image>
							<view class="uni_detail">{{item.name}}</view>
						</view>
						<view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view>
						
					</label>
				</radio-group>
			</view>
			
		</view>
		<view class="bottom">
			<view class="submit" @click="gopay">去支付</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					{
						value: '1',
						name: '支付宝',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/alipay.png'
					},
					{
						value: '2',
						name: '微信',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wxpay.png'
					},
					{
						value: '4',
						name: '银联',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/bank.png'
					}
				],
				money:'',
				id:'',
				payType:'' ,// 付款方式
				buyId:'',
				buyId:'',
				times:'' ,// 倒计时
				userInfo:{} // 绑定信息
				
			}
		},
		onLoad(options) {
			console.log(options)
			this.money = options.money;
			this.id = options.id;
			this.buyId = options.buyId;
			this.times = parseInt(options.times)/1000;
			this.getUserInfo();
		},
		methods: {
			radioChange: function (e) {
				console.log(e)
				this.payType = e.detail.value; 
			},
			// 去支付
			gopay: function () {
				let that = this;
				let payType = that.payType
				let id = this.id;
				let buyId = this.buyId;
				if (payType == '') {
					that.tui.toast('请选择支付方式')
					return
				}
				if (payType == 1) { //支付宝
					uni.redirectTo({
						url: 'sureAlipay/sureAlipay?payType=' + payType + '&id=' + id + '&buyId=' + buyId,  //支付宝
					});
					 
				} else if (payType == 2) { // 微信
					uni.redirectTo({
						url: 'surePayment/surePayment?payType=' + payType + '&id=' + id + '&buyId=' + buyId,  //微信
					});
					
				} else if (payType == 4) {  // 银联
					uni.redirectTo({
						url: 'sureBankpay/sureBankpay?payType=' + payType + '&id=' + id + '&buyId=' + buyId,  //银联
					});
					
				}
				
			},
			// 判断是否绑定
			// 获取我的信息
			getUserInfo: function () {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data.yxUserinfo;
				})
			}
			
		},
		// 监听返回按钮
		onBackPress(e) {
			console.log(e)
			setTimeout(function () {
				uni.$emit('update',{msg:'页面更新'});
				uni.$emit('billOrder',{msg:'更新买单'})
			},1000)
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		.top_title {
			width: 100%;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #140005;
			line-height: 60rpx;
			font-weight: 500;
		}
		.top_tip {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			line-height: 50rpx;
		}
		.top_date {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
			font-size: 36rpx;
			color: #666666;
			font-weight: 500;
			letter-spacing: 5rpx;
			.top_date_curr {
				color: #E42221;
				padding-left: 20rpx;
			}
		}
		.paymoney {
			width: 418rpx;
			line-height: 100rpx;
			border: 2rpx solid #E42221;
			margin: 20rpx auto 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 62rpx;
			color: #E42221;
			.sign {
				font-size: 32rpx;
				color: #FFDA71;
				padding-top: 15rpx;
			}
		}
		
	}
	
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0 180rpx 0;
		border-top: 2rpx dashed #666;
		.grouplist {
			width: 100%;
			box-sizing: border-box;
			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80rpx;
				padding: 10rpx 0;
				.radio {
					transform: scale(0.8);
				}
				.uni_name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.uni_icon {
						width: 50rpx;
						height: 50rpx;
					}
					.uni_detail {
						padding-left: 18rpx;
					}
					
				}
				
				
			}
			
			
			
		}
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		z-index: 66;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
